<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-08-01 21:29:24
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-08-02 16:56:37
 * @FilePath: \g-dialog\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-input
    placeholder="请输入内容"
    v-model="inputText"
  />
  <el-button
    type="primary"
    @click="openDialog"
  >
  打开对话框
</el-button>
  <el-button
    type="primary"
    @click="openDrawer"
  >
    打开抽屉
  </el-button>
  <CharacterDialog
    ref="CharacterDialogRef"
    @character-selected="onCharacterSelected"
  />
  <CharacterDrawer
    ref="CharacterDrawerRef"
    @character-selected="onCharacterSelected"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import CharacterDialog from './components/CharacterDialog.vue'
import CharacterDrawer from './components/CharacterDrawer.vue'
const inputText = ref('')
const CharacterDialogRef = ref()
const CharacterDrawerRef = ref()

const onCharacterSelected = (char) => {
  ElMessage.success(`你选择了${char}`)
}

// 对话框方法
const openDialog = () => {
  CharacterDialogRef.value.openDialog();
}
const openDrawer = () => {
  CharacterDrawerRef.value.openDrawer();
}
</script>